<template>
  <div class="infoBox">
    <div class="container">
      <div>
        <img src="../assets/logo.png" class="avatar" />
      </div>
      <div class="textInfo">
        <div class="text">{{ PCname }}</div>
        <div class="text">CPU:&nbsp;AMD Ryzen 9 5900X</div>
        <div class="text">Memory:&nbsp;{{ memory }}&nbsp;MiB</div>
      </div>
      <div class="statusBox">
        <div>Status:&nbsp;</div>
        <div class="offline" v-if="!online">OFFLINE</div>
        <div class="online" v-if="online">ONLINE</div>
      </div>
      <div class="buttonBox">
        <el-button-group>
          <el-button type="primary" @click="wake">Wake</el-button>
          <el-button type="primary" @click="toDetail"> Detail </el-button>
        </el-button-group>
      </div>
    </div>
    <el-dialog v-model="dialogVisible" title="Confirmation" width="50%">
      <span>Are you sure to wake {{ PCname }}?</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >Confirm</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "StatusViewer",
  mounted() {
    console.log("Viewer component mounted.");
  },
  props: {
    // msg: String,
  },
  data() {
    return {
      cpu: "AMD Ryzen 9 5900X",
      PCname: "RC-Workstation",
      memory: 15336,
      online: true,
      dialogVisible: false,
    };
  },
  methods: {
    wake() {
      console.log("Clicked wake button.");
      this.$data.dialogVisible = true;
    },
    toDetail() {
      //   let router_path = this.$route.path;
      //   console.log(router_path);
      this.$root.$router.push({ path: "../views/Detail" });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 1px solid rgba(32, 32, 32, 0.658);
}
.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 2fr 1fr;
  padding: 20px;
}
.infoBox {
  margin-top: 20px;
  margin-left: 20px;
  margin-right: 20px;
  border-radius: 15px;
  width: 400px;
  max-height: 240px;
  box-shadow: 4px 4px 3px 3px rgba(0, 0, 0, 0.233);
}
.textInfo {
  margin-top: 10px;
  margin-left: 10px;
  padding: 10px;
  text-align: left;
}
.text {
  margin-top: 5px;
}
.buttonBox {
  margin-top: 15px;
  text-align: center;
  /* transform: translate(100px,100px); */
}
.statusBox {
  margin-top: 10px;
}
.offline {
  margin-top: 10px;
  font-size: 20px;
  color: gray;
}
.online {
  margin-top: 10px;
  font-size: 20px;
  color: chartreuse;
}
</style>
